<!DOCTYPE html>
<html lang="en">

<head>
    <title>弹窗</title>
    <!--=include _head.html  -->
</head>

<body class="fa-layout">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">弹出位置</div>
            <div class="layui-card-body" id="position">
                <button data-method="offset" data-type="t" class="layui-btn layui-btn-primary">上弹出</button>
                <button data-method="offset" data-type="r" class="layui-btn layui-btn-primary">右弹出</button>
                <button data-method="offset" data-type="b" class="layui-btn layui-btn-primary">下弹出</button>
                <button data-method="offset" data-type="l" class="layui-btn layui-btn-primary">左弹出</button>
                <button data-method="offset" data-type="lt" class="layui-btn layui-btn-primary">左上弹出</button>
                <button data-method="offset" data-type="lb" class="layui-btn layui-btn-primary">左下弹出</button>
                <button data-method="offset" data-type="rt" class="layui-btn layui-btn-primary">右上弹出</button>
                <button data-method="offset" data-type="rb" class="layui-btn layui-btn-primary">右下弹出</button>
                <button data-method="offset" data-type="auto" class="layui-btn layui-btn-primary">居中弹出</button>
            </div>
            <div class="layui-card-body layui-text">
                更多案例参考：
                <a href="http://www.layui.com/doc/modules/layer.html" class="">layui的layer弹窗组件</a>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">信息框</div>
            <div class="layui-card-body " id="message">
                <button data-method="alert" class="layui-btn layui-btn-primary">普通alert</button>
                <button data-method="msg1" class="layui-btn layui-btn-primary">吐司提示</button>
                <button data-method="msg2" class="layui-btn layui-btn-primary">震动的吐司提示</button>
                <button data-method="msg3" class="layui-btn layui-btn-primary">带图标吐司</button>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">自定义内容</div>
            <div class="layui-card-body" id="iframe">
                <button data-method="open" data-type="iframe" data-con="//baidu.com"
                    class="layui-btn layui-btn-primary">iframe</button>
                <button data-method="open" data-type="html" data-con="#con_html"
                    class="layui-btn layui-btn-primary">自定义html</button>
                <button data-method="open" data-type="img" data-con="#con_img"
                    class="layui-btn layui-btn-primary">图片</button>
                <button data-method="open" data-type="video" data-con="//player.youku.com/embed/XMzI1NjQyMzkwNA=="
                    class="layui-btn layui-btn-primary">视频</button>
                <button data-method="open" data-type="iframe2" data-con=""
                    class="layui-btn layui-btn-primary">iframe-禁止滚条</button>
            </div>
            <div>
                <div id="con_html" class="fa-hide">
                    <h1>Hello</h1>
                    <p>我是自定义html</p>
                </div>
                <div id="con_img" class="fa-hide">
                    <img src="../images/logo.png" alt="" />
                </div>

            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">加载层</div>
            <div class="layui-card-body" id="load">
                <button data-method="load" data-type="0" class="layui-btn layui-btn-primary">默认</button>
                <button data-method="load" data-type="1" class="layui-btn layui-btn-primary">大菊花</button>
                <button data-method="load" data-type="2" class="layui-btn layui-btn-primary">小菊花</button>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">其他功能</div>
            <div class="layui-card-body" id="others">
                <button data-method="prompt" data-type="0" class="layui-btn layui-btn-primary">prompt</button>
                <button data-method="fullscreen" data-type="1" class="layui-btn layui-btn-primary">弹出就全屏</button>
                <button data-method="msgTop" data-type="2" class="layui-btn layui-btn-primary">正上方吐司</button>
                <button data-method="noscroll" data-type="3" class="layui-btn layui-btn-primary">屏蔽浏览器滚动条</button>
            </div>
        </div>
    </div>
</body>

<script>
    layui.use('layer', function () {
        var $ = layui.jquery, layer = layui.layer;
        var active = {
            offset: function (othis) {
                var type = othis.data('type')
                    , text = othis.text();
                layer.open({
                    type: 1
                    , offset: type //具体配置参考：
                    , id: 'layerDemo' + type //防止重复弹出
                    , content: '<div style="padding: 20px 100px;">' + text + '</div>'
                    , btn: '关闭全部'
                    , btnAlign: 'c' //按钮居中
                    , shade: 0 //不显示遮罩
                    , yes: function () {
                        layer.closeAll();
                    }
                });
            }
        };
        $('#position .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

        var msgAct = {
            alert: function () {
                layer.alert('见到你真的很高兴', { icon: 6 });
            },
            msg1: function () {
                layer.msg('这是最常用的吧');
            },
            msg2: function () {
                layer.msg('震动的吐司提示', function () { });
            },
            msg3: function () {
                layer.msg('带图标吐司', { icon: 5 });
            }
        };
        $('#message .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            msgAct[method] ? msgAct[method].call(this, othis) : '';
        });
        var iframe = {
            open: function (ele) {
                let type = ele.data('type'), con = ele.data('con');
                let options = {
                    type: 1,
                    title: false,
                    area: ['auto'],
                    closeBtn: 0,
                    shadeClose: true,
                    skin: 'yourclass',
                    content: ''
                };
                switch (type) {
                    case "video":
                    case "iframe": options.type = 2; options.content = con; break;
                    case "img": options.content = $(con); options.skin = "layui-layer-nobg"; break;
                    case "html": options.content = $(con).html(); break;
                    case "iframe2": options.type = 2; options.content = ['//baidu.com', 'no']; break;

                }
                layer.open(options);
            }
        }
        $('#iframe .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            iframe[method] ? iframe[method].call(this, othis) : '';
        });

        $('#load .layui-btn').on('click', function () {
            var othis = $(this), type = othis.data('type');
            layer.load(type ? type : "");
            setTimeout(function () {
                layer.closeAll('loading');
            }, 1000)
        });


        let othersAct = {
            prompt: function () {
                layer.prompt(function (val, index) {
                    layer.msg("输入了 : " + val)
                    layer.close(index);
                })
            },
            noscroll: function () {
                layer.open({
                    content: '浏览器滚动条已锁',
                    scrollbar: false
                });
            }, msgTop: function () {
                layer.msg('灵活运用offset', {
                    offset: 't',
                    anim: 6
                });
            }, fullscreen: function () {
                var index = layer.open({
                    type: 2,
                    content: window.location.href,
                    area: ['320px', '195px'],
                    maxmin: true
                });
                layer.full(index);
            }
        }
        $('#others .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            othersAct[method] ? othersAct[method].call(this, othis) : '';
        });


    });
</script>

</html>